<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客服管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            客服管理&nbsp;&nbsp;
                            <a class="layui-btn layui-btn-sm" href="edit.html">添加</a>&nbsp;&nbsp;
                            <a class="layui-btn layui-btn-sm layui-btn-normal" href="../../code/cs_login/index.html" target="_blank">登录客服工作台</a>
                        </div>
                        <div class="layui-card-body">
                            <table class="layui-hide" id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var reloadList;
        layui.use(['form', 'table'], function () {
            var $ = layui.$
                , form = layui.form
                , layer = layui.layer
                , table = layui.table;

            //第一个实例
            table.render({
                elem: '#LAY-user-manage'
//            ,height: 'full-200'
                , url: '/cs_user/list_data' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名', width: 120, sort: true, fixed: 'left'}
                    , {field: 'group', title: '微信组', width: 150, templet: '#groupTpl'}
                    , {field: 'wechat_state', title: '微信/在线', width: 120, templet: '#wechatStateTpl'}
                    , {field: 'agree_room', title: '群聊开关', width: 120, templet: '#agreeRoomTpl'}
                    , {field: 'unread_msg_count', title: '未读消息', width: 150, templet: '#unreadMsgCountTpl'}
                    , {field: 'ip', title: 'IP', width: 140}
                    , {field: 'last_login', title: '登录时间', width: 170, sort: true}
                    , {field: 'login_num', title: '登录次数', width: 100, sort: true, hide: true}
                    , {field: 'created', title: '创建时间', width: 170, hide: true}
                    , {field: 'remark', title: '备注'}
                    , {field: 'status', title: '状态', width: 80, templet: '#statusTpl'}
                    , {fixed: 'right', width: 180, align: 'center', toolbar: '#barDemo'}
                ]]
                , title: '用户列表'
                , toolbar: true
                , defaultToolbar: ['filter']
            });

            //监听工具条
            table.on('tool(LAY-user-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        alert(data.id);
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令

                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something

                } else if (layEvent === 'entry') {
                    var targetUrl = "/cs_user/entry/" + data.id;
                    $.ajax({
                        type: "GET",
                        url: targetUrl,
                        success: function (response) {
                            var dataObj = $.parseJSON(response);
                            if (dataObj.code === 0) {
                                layer.msg(dataObj.msg, {icon: 6});
                                if (dataObj.redirect_url) {
                                    setTimeout(function () {
                                        location.href = dataObj.redirect_url;
                                    }, 1000);
                                }
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }
                        },
                        error: function (request, status, error) {
                            layer.msg('哦噢，网络开小差了', {icon: 5});
                        }
                    });
                } else if (layEvent === 'setMsgRead') {
                    layer.confirm('确定要将未读消息设置为已读吗？', function (index) {
                        var post = {
                            id: data.id,
                            read: 1
                        };
                        $.ajax({
                            type: "POST",
                            data: post,
                            url: "/cs_user/setMsgRead",
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {icon: 6});
                                    setTimeout(function () {
                                        reloadList();
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            reloadList = function () {
                table.reload('LAY-user-manage', {
                    where: { //设定异步数据接口的额外参数，任意设

                    }
                    , page: {
//                    curr: 1 //重新从第 1 页开始
                    }
                });
            };

            //监听群聊状态操作
            form.on('switch(agreeRoom)', function (obj) {
                var agree_room = 0;
                if (obj.elem.checked) {
                    agree_room = 1;
                }
                var id = this.step;
                var post = {
                    id: id,
                    agree_room: agree_room
                };
                $.ajax({
                    type: "POST",
                    url: "/cs_user/changeAgreeRoom",
                    data: post,
                    success: function (response) {
                        var dataObj = $.parseJSON(response);
                        if (dataObj.code == 0) {
                            layer.tips('修改成功', obj.othis);
                        } else if (dataObj.code == -1) {
                            layer.tips(dataObj.msg, obj.othis);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }

                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    },
                    error: function (request, status, error) {

                    }
                });
                return false;
            });
        });

    </script>
    <script type="text/html" id="groupTpl">
        {{#  if(d.groups.length>0){ }}
        {{#  var i = 0; }}
        {{#  layui.each(d.groups, function(index, group){ }}
        {{#  if (i!=0) { }}
        ,&nbsp;
        {{#  } }}
        {{#  i++; }}
        <lable>{{group.name}}</lable>
        {{#  }); }}
        {{#  } else { }}
        <lable style="color: orange;">未分组</lable>
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: red;">禁用</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: green;">启用</span>
        {{# } }}
    </script>
    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="entry">进入</button>
        <a class="layui-btn layui-btn-xs layui-btn-normal" href="/cs_user/auth/{{ d.id }}">权限</a>
        <a class="layui-btn layui-btn-xs" href="/cs_user/edit/{{ d.id }}">编辑</a>
    </script>
    <script type="text/html" id="wechatStateTpl">
        {{#  var total = 0; }}
        {{#  var login = 0; }}
        {{#  if(d.groups.length>0){ }}
        {{#  layui.each(d.groups, function(index, group){ }}
        {{#  total += group.wechat_num; }}
        {{#  login += group.wechat_login_num; }}
        {{#  }); }}
        {{# } }}
        {{total}} / <span style="color: green;">{{login}}</span>
    </script>
    <script type="text/html" id="unreadMsgCountTpl">
        <span style="color: orange;">{{ d.unread_msg_count }}</span>
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setMsgRead">一键已读</button>
    </script>
    <script type="text/html" id="agreeRoomTpl">
        <input type="checkbox" name="agree_room" step="{{d.id}}" value="{{d.agree_room}}" lay-skin="switch"
               lay-text="同意群聊|拒绝群聊" lay-filter="agreeRoom" {{ d.agree_room== 1 ? 'checked' : '' }}>
    </script>
</div>
</body>
</html>
